<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-27 15:13:06
 * @LastEditors: 陈迪秀 1170776994@qq.com
 * @LastEditTime: 2024-02-27 15:46:22
 * @FilePath: \stell-mall\src\components\service-telephone-dialog\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-bind="$attrs"
    class="st-dialog"
    :showClose="false"
    :close-on-click-modal="false"
    width="745"
  >
    <div class="st-dialog-view">
      <hb-svg-icon
        name="clous"
        class="svg-clous"
        width="24"
        height="24"
        @click="resetForm()"
      ></hb-svg-icon>
      <hb-svg-icon
        name="success"
        class="svg-success"
        width="85"
        height="85"
      ></hb-svg-icon>
      <h3>提交成功，您的管家会尽快联系您！</h3>
      <p>您也可以直接拨打我们的服务电话！</p>
      <h1>400-966-1096</h1>
      <el-button class="butns" @click="resetForm()">知道了</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { defineEmits } from "vue";
const emit = defineEmits(["close", "handleConfirm"]);
const resetForm = () => {
  emit("close");
};
</script>
<style lang="scss">
.st-dialog {
  padding: 0 !important;
  border-radius: 8px 8px 8px 8px;
  z-index: 9999;
  .el-dialog__header {
    height: 0;
    padding: 0 !important;
  }
  .st-dialog-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 24px;
    .svg-clous {
      align-self: flex-end;
    }
    .svg-success {
      margin: 40px;
    }
    h3 {
      height: 34px;
      /* font-weight: 600; */
      font-size: 24px;
      color: #172b4d;
      line-height: 28px;
      margin-bottom: 30px;
    }
    p {
      height: 29px;
      font-weight: 400;
      font-size: 20px;
      color: #6b778c;
      line-height: 23px;
      margin-bottom: 30px;
    }
    h1 {
      height: 69px;
      font-size: 48px;
      color: #1678ff;
      line-height: 56px;
      margin-bottom: 30px;
    }
    .butns {
      width: 120px;
      height: 40px;
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #dfe1e6;
    }
  }
}
</style>
